<template>
  <v-breadcrumbs :items="items" large>
    <template v-slot:item="{ item }">
      <v-breadcrumbs-item
        :href="item.path"
        :disabled="item.disabled"
      >
        <v-btn v-if=" item.meta.icon" small tile icon color="teal">
          <v-icon>{{ item.meta.icon }}</v-icon>
        </v-btn>
        <span v-else>{{ item.meta.title }}</span>
      </v-breadcrumbs-item>
    </template>
  </v-breadcrumbs>
</template>

<script>
import '@/assets/css/business/blog/breadcrumb.scss'

export default {
  name: 'breadcrumb',
  data() {
    return {
      items: null
    }
  },
  watch: {
    $route() {
      this.getBreadcrumb()
    }
  },
  created() {
    this.getBreadcrumb()
  },
  methods: {
    getBreadcrumb() {
      let matched = this.$route.matched.filter(item => item.name)// $route.matched 将会是一个包含从上到下的所有对象 (副本)。
      const first = matched[0]
      first.disabled = true
      if (first && first.name !== 'BlogHome' && first.name !== 'BlogMain') { // $route.name当前路由名称  ；$route.redirectedFrom重定向来源的路由的名字
        matched = [{ path: '/blog', meta: { title: '博客列表' }}].concat(matched)
      }
      this.items = matched
    }
  }
}
</script>
